<template>
  <div class="user-manage-wrapper">
    <el-form :inline="true" :model="formInline">
      <el-form-item label="用户名">
        <el-input v-model="formInline.userNameLike" placeholder="请输入用户名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchSource">查询</el-button>
        <el-button type="primary" @click="popNewAddDialog">新增用户</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" ref="multipleTable" v-loading="loading" stripe>
      <el-table-column label="序号" width="50">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="用户名" prop="userName"></el-table-column>
      <el-table-column label="真实姓名" prop="realName"></el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="昵称" prop="nickName"></el-table-column>
      <el-table-column label="手机号码" prop="mobilePhone"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" icon="el-icon-view" @click="viewDetail(scope.row.userId)">查看</el-link>&nbsp;
          <el-link type="primary" :underline="false" icon="el-icon-edit" @click="editDetail(scope.row.userId)">编辑</el-link>&nbsp;
          <el-link type="danger" :underline="false" icon="el-icon-delete" @click="deleteDetail(scope.row.userId)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="paging-self"
      background
      :current-page.sync="currentPage"
      @current-change="pageChange"
      layout="total, prev, pager, next"
      :total="totalCount">
    </el-pagination>
    <!-- 对话框 开始 -->
    <el-dialog title="用户" :visible.sync="dialogFormVisible" width="660px" @closed="closeDialog">
      <el-form :model="dialogForm" class="dialog-form-comot" :disabled="dialogMode===CNST.READ_MODE" :rules="rules" ref="ruleDialog" label-width="108px">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="dialogForm.userName" placeholder="请输入用户名" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="dialogForm.realName" placeholder="请输入真实姓名" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="dialogForm.nickName" placeholder="请输入昵称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="dialogForm.email" placeholder="请输入邮箱" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="telephone">
          <el-input v-model="dialogForm.telephone" placeholder="请输入电话" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobilePhone">
          <el-input v-model="dialogForm.mobilePhone" placeholder="请输入手机号码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="dialogForm.password" placeholder="请输入密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码盐" prop="passwordSalt">
          <el-input v-model="dialogForm.passwordSalt" placeholder="请输入密码盐" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="毕业院校" prop="college">
          <el-input v-model="dialogForm.college" placeholder="请输入毕业院校" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学历" prop="education">
          <el-select v-model="dialogForm.education" placeholder="请选择学历" clearable>
            <el-option
              v-for="(item) in DICY.education"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="头像" prop="remark">
          <el-input v-model="dialogForm.remark" placeholder="请输入头像" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="性别" prop="sex">
          <el-select v-model="dialogForm.sex" placeholder="请选择性别" clearable>
            <el-option label="男" value="M"></el-option>
            <el-option label="女" value="F"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker
            v-model="dialogForm.birthday"
            type="date"
            placeholder="请选择选择出生日期" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="qq号" prop="qq">
          <el-input v-model="dialogForm.qq" placeholder="请输入qq号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在地" prop="areaId">
          <el-input v-model="dialogForm.areaId" placeholder="请输入所在地" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职务编号" prop="dutyNo">
          <el-input v-model="dialogForm.dutyNo" placeholder="请输入职务编号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职务名称" prop="dutyName">
          <el-input v-model="dialogForm.dutyName" placeholder="请输入职务名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="idCard">
          <el-input v-model="dialogForm.idCard" placeholder="请输入身份证" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证有效期" prop="idCardTerm">
          <el-date-picker
            v-model="dialogForm.idCardTerm"
            type="date"
            placeholder="请选择身份证有效期" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否实名" prop="real">
          <el-select v-model="dialogForm.real" placeholder="请选择是否实名" clearable>
            <el-option label="是" value="Y"></el-option>
            <el-option label="否" value="N"></el-option>
            <el-option label="认证中" value="L"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户类型" prop="userType">
          <el-select v-model="dialogForm.userType" placeholder="请选择用户类型" clearable>
            <el-option label="普通用户" value="P"></el-option>
            <el-option label="管理员" value="G"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="启用禁用状态" prop="userStatus">
          <el-select v-model="dialogForm.userStatus" placeholder="请选择启用禁用状态" clearable>
            <el-option label="启用" value="Q"></el-option>
            <el-option label="禁用" value="J"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitOrg" v-if="dialogMode!==CNST.READ_MODE">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 对话框 结束 -->
  </div>
</template>

<script>
import {
  getUserList,
  addUser,
  getUserDetail,
  updateUser,
  deleteUser
} from '@/api/systemManage'
import { deepClone, convertDateToString } from '@/utils'
export default {
  name: 'UserManage',
  data () {
    return {
      formInline: {
        userNameLike: ''
      },
      tableData: [],
      loading: false,
      dialogMode: '',
      dialogFormVisible: false,
      dialogForm: {
        userName: '',
        realName: '',
        nickName: '',
        email: '',
        telephone: '',
        mobilePhone: '',
        password: '',
        passwordSalt: '',
        college: '',
        education: '',
        sex: '',
        birthday: '',
        qq: '',
        areaId: '',
        dutyNo: '',
        dutyName: '',
        idCard: '',
        idCardTerm: '',
        real: '',
        userType: '',
        userStatus: ''
      },
      rules: {
        userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      curId: '',
      totalCount: 0, // 总共多少条
      currentPage: 1 // 分页当前页
    }
  },
  methods: {
    async getListAndShow () {
      try {
        this.loading = true
        let requestData = {
          page: this.currentPage,
          pageSize: 10,
          ...deepClone(this.formInline)
        }
        var res = await getUserList(requestData)
        this.tableData = res.data.queryResult
        this.totalCount = res.data.totalCount
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    searchSource () {
      this.currentPage = 1
      this.getListAndShow()
    },
    pageChange (curPage) {
      this.currentPage = curPage
      this.getListAndShow()
    },
    popNewAddDialog () {
      this.dialogFormVisible = true
      this.dialogMode = this.CNST.ADDNEW_MODE
    },
    handleChange (value) {
      console.log(value)
    },
    viewDetail (userId) {
      this.dialogMode = this.CNST.READ_MODE
      this.dialogFormVisible = true
      getUserDetail({ userId }).then((res) => {
        this.showToDialog(res.data)
      })
    },
    editDetail (userId) {
      this.dialogMode = this.CNST.EDIT_MODE
      this.dialogFormVisible = true
      this.curId = userId
      getUserDetail({ userId }).then((res) => {
        this.showToDialog(res.data)
      })
    },
    deleteDetail (userId) {
      this.$confirm('确定删除, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((res) => {
        deleteUser({ userId }).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getListAndShow()
        })
      })
    },
    showToDialog (data) {
      for (let key in data) {
        if (this.dialogForm.hasOwnProperty(key)) {
          this.dialogForm[key] = data[key]
        }
      }
    },
    closeDialog () {
      this.dialogMode = ''
      // 当前点击查看或编辑列表项的id置空
      this.curId = ''
      // 弹框关闭后重置表单验证
      this.$refs.ruleDialog.resetFields()
      // 清空弹框内表单数据
      for (let key in this.dialogForm) {
        this.dialogForm[key] = ''
      }
    },
    submitOrg () {
      this.$refs.ruleDialog.validate((valid) => {
        if (valid) {
          let requestData = deepClone(this.dialogForm)
          convertDateToString(requestData)
          if (this.dialogMode === this.CNST.ADDNEW_MODE) {
            // 新增
            addUser(requestData).then((res) => {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.getListAndShow()
              this.dialogFormVisible = false
            })
          } else if (this.dialogMode === this.CNST.EDIT_MODE) {
            // 修改
            requestData.userId = this.curId
            updateUser(requestData).then((res) => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.getListAndShow()
              this.dialogFormVisible = false
            })
          }
        } else {
          return false
        }
      })
    }
  },
  mounted () {
    this.getListAndShow()
  }
}
</script>

<style lang="scss" scoped>
.user-manage-wrapper {
  height: calc(100vh - 180px);
  background-color: #ffffff;
  padding: 15px;
  box-shadow: 10px 10px 22px -2px #d2d6da;
  border-radius: 3px;
  .el-form.dialog-form-comot {
    .el-form-item {
      .el-cascader,.el-select {
        width: 100%;
      }
    }
  }
  .el-pagination.paging-self {
    margin-top: 20px;
    float: right;
  }
  .el-tree {
    /deep/.el-tree-node__content>.el-checkbox {
      margin-right: 8px;
    }
  }
}
</style>
